<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客文章 - Qwen Coder</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!-- Three.js宇宙背景容器 -->
    <div id="background-container"></div>
    
    <!-- 主要内容 -->
    <div class="main-container">
        <!-- 头部导航 -->
        <header class="site-header">
            <div class="container">
                <div class="header-content">
                    <div class="logo">
                        <h1>Qwen Coder</h1>
                    </div>
                    <nav class="main-nav">
                        <ul>
                            <li><a href="index.html">首页</a></li>
                            <li><a href="topics.html">话题中心</a></li>
                            <li><a href="blog.html" class="active">博客文章</a></li>
                            <li><a href="discussions.html">讨论串</a></li>
                            <li><a href="profile.html">个人资料</a></li>
                        </ul>
                    </nav>
                    <div class="user-actions">
                        <button id="new-post-btn" class="glow-button">发帖</button>
                    </div>
                </div>
            </div>
        </header>

        <!-- 页面内容 -->
        <main class="site-main">
            <div class="container">
                <section class="blog-header">
                    <h2>技术博客</h2>
                    <p>来自社区专家的深度技术文章</p>
                </section>

                <section class="blog-posts">
                    <article class="content-card">
                        <h3>使用Qwen模型构建下一代AI应用</h3>
                        <div class="post-meta">
                            <span>作者: AI研究员</span>
                            <span>发布时间: 2025-08-10</span>
                            <span>阅读量: 1250</span>
                        </div>
                        <p>在本文中，我们将探讨如何利用Qwen大语言模型构建创新的AI应用。我们将从模型选择、提示工程到部署策略进行全面分析...</p>
                        <a href="#" class="read-more">阅读全文</a>
                    </article>
                    
                    <article class="content-card">
                        <h3>Three.js在现代Web可视化中的应用</h3>
                        <div class="post-meta">
                            <span>作者: 前端工程师</span>
                            <span>发布时间: 2025-08-05</span>
                            <span>阅读量: 2100</span>
                        </div>
                        <p>Three.js作为最受欢迎的WebGL库之一，为Web开发者提供了创建3D图形的强大能力。本文将介绍其核心概念和实际应用案例...</p>
                        <a href="#" class="read-more">阅读全文</a>
                    </article>
                    
                    <article class="content-card">
                        <h3>微服务架构的挑战与解决方案</h3>
                        <div class="post-meta">
                            <span>作者: 架构师</span>
                            <span>发布时间: 2025-08-01</span>
                            <span>阅读量: 1870</span>
                        </div>
                        <p>随着系统复杂性的增加，微服务架构成为许多企业的首选。然而，这种架构也带来了新的挑战。本文将探讨常见的问题及应对策略...</p>
                        <a href="#" class="read-more">阅读全文</a>
                    </article>
                </section>
            </div>
        </main>

        <!-- 全屏发帖编辑器 -->
        <div id="post-editor" class="fullscreen-editor">
            <div class="editor-container">
                <div class="editor-header">
                    <h2>创建新帖子</h2>
                    <div class="editor-actions">
                        <button id="close-editor" class="icon-button">✕</button>
                    </div>
                </div>
                <div class="editor-content">
                    <input type="text" placeholder="输入标题..." class="editor-title">
                    <textarea placeholder="分享你的想法..." class="editor-body"></textarea>
                </div>
                <div class="editor-footer">
                    <button class="glow-button">发布</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入Three.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <!-- 引入主要脚本 -->
    <script src="js/main.js"></script>
</body>
</html>